<template>
    <div class="product">
        <h3>{{ title }}</h3>
        <ul>
            <li v-for="item in newGoodsListArr" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <p>{{ item.name }}</p>
                <p>${{ item.retail_price.toFixed(2) }}元</p>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import type { Inewgoodslistitem } from '@/types/homeType'
import { defineProps } from 'vue';
const props = defineProps<{
    title: string,
    newGoodsListArr: Array<Inewgoodslistitem>
}>()
</script>
<style lang="scss" scoped>
.product {
    h3 {
        text-align: center;
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 50%;
            text-align: center;

            img {
                width: 100%;
            }
        }
    }
}
</style>